<template>
  <view class="treeselectcontent">
    <!-- <view class="openbtn" @click="showTree">
      {{ activeitem.name || "请选择" }}
    </view> -->
    <u-form-item :label="item.label" borderBottom ref="item1" :prop="item.value">
      <view @click="!disabled && showTree()" style="flex: 1; padding: 0" ref="formitem">
        {{ activeitem.name || "请选择" }}
      </view>
    </u-form-item>
    <tki-tree ref="tkitree" :range="list" rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
  </view>
</template>

<script>
import tkiTree from "@/components/tki-tree/tki-tree.vue";
import { listDept } from "@/api/system/dept";
export default {
  inject: {
    uForm: {
      default: () => ({}),
    },
  },
  components: {
    tkiTree,
  },
  props: {
    item: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    data: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    value: {
      typeof: [String, Number, Boolean, Array, Object],
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      list: [],
      listDeptdata: [],
    };
  },
  computed: {
    disabled() {
      return this.uForm.disabled;
    },
    activeitem() {
      let r = this.listDeptdata.find((e) => {
        return e.id == this.data[this.item.value];
      });
      return r ? r : {};
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      function handleTree(data, id, parentId, children, rootId) {
        id = id || "id";
        parentId = parentId || "parentId";
        children = children || "children";
        rootId =
          rootId ||
          Math.min.apply(
            Math,
            data.map((item) => {
              return item[parentId];
            })
          ) ||
          0;
        //对源数据深度克隆
        const cloneData = JSON.parse(JSON.stringify(data));
        //循环所有项
        const treeData = cloneData.filter((father) => {
          let branchArr = cloneData.filter((child) => {
            //返回每一项的子级数组
            return father[id] === child[parentId];
          });
          branchArr.length > 0 ? (father.children = branchArr) : "";
          //返回第一层
          return father[parentId] === rootId;
        });
        return treeData !== "" ? treeData : data;
      }
      listDept({}).then((response) => {
        this.list = handleTree(response.data, "id");
        this.listDeptdata = response.data;
      });
    },
    // 确定回调事件
    treeConfirm(e) {
      if (e.length == 1) {
        // this.activeitem = e[0];
        this.$emit("input", String(e[0].id));
        this.$emit("change");
        uni.$u.formValidate(this.$refs.formitem, "blur");
      }
    },
    // 取消回调事件
    treeCancel(e) {
      console.log(e);
    },
    // 显示树形选择器
    showTree() {
      this.$refs.tkitree._show();
    },
  },
};
</script>
<style lang="scss" scoped>
.treeselectcontent {
  flex: 1;

  .openbtn {
    display: flex;
    // justify-content: center;

    align-items: center;
    // height: 100%;
    border: 1px solid #e5e5e5;
    position: relative;
    height: 72rpx;
    padding: 0 20rpx;
    border-radius: 10rpx;

    .iconclear {
      position: absolute;
      right: 10rpx;
    }
  }
}
</style>
